<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>烘焙坊-首页</title>
  </head>
  <!--引入element ui的CSS样式-->
  <link rel="stylesheet" href="css/element-ui.css" />
  <!--样式内容-->
  <style>
    .center {
      width: 1200px;
      margin: 0 auto;
    }

    #footer_center p {
      margin: 0;
    }

    #footer_center h3 {
      color: white;
    }

    .modulebg {
      background-color: white;
    }

    body {
      background-color: rgb(241, 242, 243);
    }
  </style>
  <body>
    <div id="app">
      <el-container>
        <!--头部-->
        <el-header height="80px" class="modulebg">
          <!-- 设置头部的宽度 -->
          <div class="center">
            <el-row gutter="20">
              <el-col :span="6">
                <img src="imgs/icon.png" />
              </el-col>
              <el-col :span="10">
                <!--:default-avtive 设置默认选中的位置
                            mode="horizontal" 用来设置横向显示 去掉mode纵向显示
                        -->
                <el-menu mode="horizontal">
                  <el-menu-item>首页</el-menu-item>
                  <el-menu-item>食谱</el-menu-item>
                  <el-menu-item>视频</el-menu-item>
                  <el-menu-item>资讯</el-menu-item>
                </el-menu>
              </el-col>
              <el-col :span="6">
                <el-input
                  placeholder="请输入搜索的关键字"
                  style="margin-top: 15px"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-popover
                  v-show="isLogin == false"
                  placement="top-start"
                  title="欢迎来到烘焙坊"
                  width="200"
                  trigger="hover"
                >
                  <div slot="reference">
                    <i
                      class="el-icon-user"
                      style="font-size: 30px; position: relative; top: 20px"
                    ></i>
                  </div>
                  <el-button type="info">注册</el-button>
                  <el-button
                    style="background-color: orange"
                    @click="location.href='/login.html'"
                    >登录</el-button
                  >
                </el-popover>

                <el-popover
                  v-show="isLogin == true"
                  placement="top-start"
                  title="昵称：{{user.nickName}}"
                  width="200"
                  trigger="hover"
                >
                  <div slot="reference">
                    <i
                      class="el-icon-user"
                      style="font-size: 30px; position: relative; top: 20px"
                    ></i>
                  </div>
                  <div style="text-align: center">
                    <img
                      :src="user.imgUrl"
                      alt=""
                      style="width: 50px; height: 50px"
                    />
                    <p>个人中心</p>
                    <p>后台管理系统</p>
                  </div>
                  <el-button type="info">退出登录</el-button>
                </el-popover>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <!--主体-->
        <el-main class="center">
          <!--轮播图模块-->
          <el-carousel height="380px">
            <el-carousel-item v-for="item in bannerArr" :key="item">
              <img :src="item.imgUrl" width="100%" />
            </el-carousel-item>
          </el-carousel>
          <!--食谱模块-->
          <el-row class="modulebg">
            <el-col :span="3">
              <p style="font-size: 30px; margin: 0; line-height: 70px">
                烘焙食谱
              </p>
            </el-col>
            <el-col :span="21">
              <!--食谱导航栏模块-->
              <el-menu
                mode="horizontal"
                default-active="1"
                active-text-color="orange"
              >
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="2">面包</el-menu-item>
                <el-menu-item index="3">零食</el-menu-item>
                <el-menu-item index="4">家常菜</el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <!--食谱卡片内容-->
          <el-row gutter="20">
            <el-col :span="6" v-for="p in productArr">
              <el-card style="margin: 10px 0">
                <img :src="p.imgUrl" style="width: 100%; height: 150px" />
                <p>{{p.title}}</p>
                <el-row gutter="20">
                  <el-col :span="4">
                    <el-avatar size="small" :src="p.userImgUrl"></el-avatar>
                  </el-col>
                  <el-col :span="10">{{p.nickName}}</el-col>
                  <el-col :span="10">
                    <span style="font-size: 10px; float: right; color: #989898"
                      >{{p.categoryName}}</span
                    >
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
          <div style="text-align: center; margin-bottom: 10px">
            <el-button>点击查看更多食谱</el-button>
          </div>
          <!--食谱视频模块-->
          <el-row class="modulebg">
            <el-col :span="3">
              <p style="font-size: 30px; margin: 0; line-height: 70px">
                烘焙视频
              </p>
            </el-col>
            <el-col :span="21">
              <!--食谱视频导航栏模块-->
              <el-menu
                mode="horizontal"
                default-active="1"
                active-text-color="orange"
              >
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="2">面包教学</el-menu-item>
                <el-menu-item index="3">零食鉴赏</el-menu-item>
                <el-menu-item index="4">家常菜教程</el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <!--食谱视频卡片内容-->
          <el-row gutter="20">
            <el-col :span="6" v-for="p in productArr">
              <el-card style="margin: 10px 0">
                <img :src="p.imgUrl" style="width: 100%; height: 150px" />
                <p>{{p.title}}</p>
                <el-row gutter="20">
                  <el-col :span="4">
                    <el-avatar size="small" :src="p.userImgUrl"></el-avatar>
                  </el-col>
                  <el-col :span="10">{{p.nickName}}</el-col>
                  <el-col :span="10">
                    <span style="font-size: 10px; float: right; color: #989898"
                      >{{p.categoryName}}</span
                    >
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
          <div style="text-align: center; margin-bottom: 10px">
            <el-button>点击查看更多视频</el-button>
          </div>
          <!--资讯模块-->
          <el-row class="modulebg">
            <el-col :span="3">
              <p style="font-size: 30px; margin: 0; line-height: 70px">
                行业资讯
              </p>
            </el-col>
            <el-col :span="21">
              <!--食谱视频导航栏模块-->
              <el-menu
                mode="horizontal"
                default-active="1"
                active-text-color="orange"
              >
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="2">美食资讯</el-menu-item>
                <el-menu-item index="3">店家资讯</el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <!--资讯卡片内容-->
          <el-row gutter="20">
            <el-col :span="6" v-for="p in productArr">
              <el-card style="margin: 10px 0">
                <img :src="p.imgUrl" style="width: 100%; height: 150px" />
                <p>{{p.title}}</p>
                <el-row gutter="20">
                  <el-col :span="4">
                    <el-avatar size="small" :src="p.userImgUrl"></el-avatar>
                  </el-col>
                  <el-col :span="10">{{p.nickName}}</el-col>
                  <el-col :span="10">
                    <span style="font-size: 10px; float: right; color: #989898"
                      >{{p.categoryName}}</span
                    >
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
          <div style="text-align: center; margin-bottom: 10px">
            <el-button>点击查看更多视频</el-button>
          </div>
        </el-main>
        <!--尾部-->
        <el-footer
          style="background-color: #2f3234; height: 280px; padding: 50px"
        >
          <my-footer></my-footer>
        </el-footer>
      </el-container>
    </div>
  </body>
  <!--引入Vue.js文件-->
  <script src="js/vue.min.js"></script>
  <!--引入Element-ui.js组件库-->
  <script src="js/element-ui.min.js"></script>
  <!--引入Axios文件-->
  <script src="js/axios.min.js"></script>
  <!--引入自己的js文件-->
  <script src="js/my-header.js"></script>
  <script src="js/my-footer.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {
          bannerArr: [],
          isLogin: false,
          user: "",
          productArr: [],
        };
      },
      created() {
        //发出请求，请求轮播图数据内容，使用axios异步get请求获取轮播图
        //前端请求内容时，不需要传递此参数，或者只需要传递一个参数时，使用get请求
        //进入首页时发出请求，获取当前会话对象中保存的内容，是否和后台传输的数据类型一致
        axios.get("/bannerArr").then(function (response) {
          //将response返回的数据交给bannerArr数组保存
          v.bannerArr = response.data;
        });
        axios.get("/v1/currentUser").then(function (response) {
          //服务器返回一个用户对象
          this.user = response.data();
          //用三目运算符来判断当前用户对象是否有值
          this.isLogin = this.user === "" ? 0 : 1;
        });
        axios.get("/productArr").then(function (response) {
          //将response返回的数据交给productArr数组保存
          v.productArr = response.data;
        });
      },
    });
  </script>
</html>
